<script>
import { ref } from "@vue/reactivity";
export default {
  setup() {
    //点击修改值

    const active = ref("home");
    // console.log(active._value);
    const icon = {
      home: "icon-homefill",
      nohome: "icon-home",
      study: "icon-tubiaozhizuomoban-",
      nostudy: "icon-tubiaozhizuomoban-1",
      book: "icon-book-fill",
      nobook: "icon-book",
      my: "icon-my_fill_light",
      nomy: "icon-my_light",
    };

    return {
      active,
      icon,
    };
  },
};
</script>

<template>
  <div class="container">
    <van-tabbar
      v-model="active"
      route
      active-color="#222831"
      inactive-color="#adafb2"
    >
      <van-tabbar-item name="home" replace to="/home">
        <template #icon="props">
          <div
            :class="['iconfont', props.active ? icon.home : icon.nohome]"
          ></div>
        </template>
        <span>首页</span>
      </van-tabbar-item>

      <van-tabbar-item name="study" replace to="/study">
        <template #icon="props">
          <div
            :class="['iconfont', props.active ? icon.study : icon.nostudy]"
          ></div>
        </template>
        <span>学习</span>
      </van-tabbar-item>

      <van-tabbar-item name="book" replace to="/book">
        <template #icon="props">
          <div :class="['iconfont', props.active ? icon.book : icon.nobook]"></div>
        </template>
        <span>书城</span>
      </van-tabbar-item>

      <van-tabbar-item name="my" replace to="/my">
        <template #icon="props">
          <div :class="['iconfont', props.active ? icon.my : icon.nomy]"></div>
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss">
@import url(../assets/css/base.css);

.iconfont {
  font-size: 25px;
}
</style>